{% load static %}<!DOCTYPE html>
<html lang="{% block html_language_code %}en{% endblock %}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="ROBOTS" content="ALL" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="Copyright" content="Django Software Foundation" />
    <meta name="keywords" content="Python, Django, framework, open-source" />
    <meta name="description" content="{% block description %}{% endblock %}" />

    {% block link_rel_tags %}{% endblock link_rel_tags %}
    <!-- Favicons -->
    <link rel="apple-touch-icon" href="{% static "img/icon-touch.png" %}">
    <link rel="icon" sizes="192x192" href="{% static "img/icon-touch.png" %}">
    <link rel="shortcut icon" href="{% static "img/favicon.ico" %}">
    <meta name="msapplication-TileColor" content="#113228">
    <meta name="msapplication-TileImage" content="{% static "img/icon-tile.png" %}">

    <title>{% block title %}The Web framework for perfectionists with deadlines{% endblock %} | Django</title>

    <link rel="stylesheet" href="{% static "css/output.css" %}" >
    <script src="{% static "js/lib/webfontloader/webfontloader.js" %}"></script>
    <script>
    WebFont.load({
      custom: {
        families: ['FontAwesome', 'Fira+Mono'],
      },
      google: {
        families: ['Roboto:400italic,700italic,300,700,400:latin'
        ]
      },
      classes: false,
      events: false,
      timeout: 1000
    });
    </script>
    <script src="{% static "js/lib/modernizr.js" %}"></script>
    {% block head_extra %}{% endblock head_extra %}
  </head>

  <body id="{% block sectionid %}generic{% endblock %}" class="{% block body_class %}{% endblock %}">

    {% include "includes/header.html" %}

    <div class="copy-banner">
      <div class="container {% block header-classes %}{% endblock %}">
        {% block header %}{% endblock %}
      </div>
    </div>
    <div id="billboard">{% block billboard %}{% endblock %}</div>

    <div class="container {% block layout_class %}{% endblock %}">
      <div role="main">

        {% block messages %}
          {% if messages %}
            <ul class="messages">
              {% for message in messages %}
                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
                  {{ message }}
                  <i class="close icon icon-remove" title="close"></i>
                </li>
              {% endfor %}
            </ul>
          {% endif %}
        {% endblock %}

        {% block content %}{% endblock %}
        <a href="#top" class="backtotop"><i class="icon icon-chevron-up"></i> Back to Top</a>
      </div>

      {% block content-related %}{% endblock %}
      {% block content-extra %}{% endblock %}

    </div>

    {% block secondary %}{% endblock %} {# Used only with one column pages: Why Django, Get Started, etc #}
    {% block tertiary %}{% endblock %} {# Used only with one column pages: Why Django, Get Started, etc #}

    {# Used to display urgent news, events, and alerts #}
    {% block alert %}
    {% endblock %}

    {% block footer %}
      {% include "includes/footer.html" %}
    {% endblock %}

    {# Require JS #}
    <script>
    function extless(input) {
        return input.replace(/(.*)\.[^.]+$/, '$1');
    }
    var require = {
        shim: {
            'jquery': [],
            'jquery.inview': ["jquery"],
            'jquery.payment': ["jquery"],
            'jquery.flot': ["jquery"],
            'jquery.unveil': ["jquery"],
            'stripe': {
              exports: 'Stripe'
            }
        },
        paths: {
            "jquery": extless("{% static 'js/lib/jquery/dist/jquery.min.js' %}"),
            "jquery.inview": extless("{% static 'js/lib/jquery.inview/jquery.inview.min.js' %}"),
            "jquery.payment": extless("{% static 'js/lib/jquery.payment/lib/jquery.payment.js' %}"),
            "jquery.unveil": extless("{% static 'js/lib/unveil/jquery.unveil.min.js' %}"),
            "jquery.flot": extless("{% static 'js/lib/jquery-flot/jquery.flot.min.js' %}"),
            "clipboard": extless("{% static 'js/lib/clipboard/dist/clipboard.min.js' %}"),
            "mod/floating-warning": extless("{% static 'js/mod/floating-warning.js' %}"),
            "mod/list-collapsing": extless("{% static 'js/mod/list-collapsing.js' %}"),
            "mod/list-feature": extless("{% static 'js/mod/list-feature.js' %}"),
            "mod/mobile-menu": extless("{% static 'js/mod/mobile-menu.js' %}"),
            "mod/version-switcher": extless("{% static 'js/mod/version-switcher.js' %}"),
            "mod/search-key": extless("{% static 'js/mod/search-key.js' %}"),
            "mod/stripe-change-card": extless("{% static 'js/mod/stripe-change-card.js' %}"),
            "mod/console-tabs": extless("{% static 'js/mod/console-tabs.js' %}"),
            "stripe-checkout": "https://checkout.stripe.com/checkout",
            "stripe": "https://js.stripe.com/v3/?" // ? needed due to require.js
        }
    };
    </script>
    <script data-main="{% static "js/main.js" %}" src="{% static "js/lib/require.js" %}"></script>
    {% block body_extra %}{% endblock body_extra %}

  </body>
</html>
